<script type="text/javascript">
	$(function(){
		// 大廣告圖片的高度及動畫時間
		var adHeight = 330,
			animateSpeed = 300;
		$('#adblock ul.link li a').each(function(i){
			// 把選單排好位置
			$(this).css('top', i * 66);
		}).mouseover(function(){
			var $this = $(this),
				// 找出目前 li 是在選單中的第幾個(jQuery 1.4)
				no = $this.parent().index();
				
			// 先移除有 .selected 的超連結的樣式
			$('#adblock ul.link li a.selected').removeClass('selected ,selected2');
			// 再把目前點擊到的超連結加上 .selected
			$this.addClass('selected');
			
			// 把 ul.showbox 的 top 移到相對應的高度
			$('#adblock ul.showbox').stop().animate({
				top: adHeight * no * -1
			}, animateSpeed);
		}).focus(function(){
			$(this).blur();
		}).eq(0).mouseover();
	});
</script>

	<div id="adblock">
		<ul class="showbox">
			<li><a href="#"><img src="img/hot-1.jpg" title="Nexus One" /></a></li>
			<li><a href="#"><img src="img/hot-2.jpg" title="Nexus One" /></a></li>
            <li><a href="#"><img src="img/hot-3.jpg" title="Nexus One" /></a></li>
            <li><a href="#"><img src="img/hot-4.jpg" title="Nexus One" /></a></li>
            <li><a href="#"><img src="img/hot-5.jpg" title="Nexus One" /></a></li>
		</ul>
		<ul class="link">
	  <li ><a href="#">1, Child Photo</a></li>
      <li ><a href="#">2, Theme Photo</a></li>
      <li ><a href="#">3, Family</a></li>
      <li ><a href="#">4, Wedding Photo</a></li>
      <li ><a href="#">5, Personal Photo</a></li>
      </ul>
		</ul>
	</div>